<template>
    <div class="app-container" v-loading="mtloading" ref="refMGoods">
        <el-form-item :label="$t('goods.ctrips.ctripName')" class="w-1/3">
            <el-input v-model="data.packageName" :placeholder="$t('message.pleaseEnter')" clearable />
        </el-form-item>
        <el-form-item :label="$t('goods.ctrips.ctripPic')+':'" prop="gm_pic" class="w-1/3">
            <el-input v-model="data.pic" :placeholder="$t('message.pleaseEnter')" readonly>
                <template #append>
                    <Upload :list="{ 'data': 'goods', 'list': false }" :type="1" :uptype="2" @exposeData="expose" />
                </template>
                <template #suffix>
                    <el-icon class="ml-2 cursor-pointer" size="20" @click="urlimg(data.pic)">
                        <Picture />
                    </el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item :label="$t('goods.ctrips.isOpen')" class="w-1/2">
            <el-switch v-model="isgmGoods" />
        </el-form-item>
        <div v-if="isgmGoods">
            <!-- 指定设备 -->
            <el-form-item :label="$t('goods.ctrips.assign')+':'" prop="designated_goods" class="w-1/2">
                <el-radio-group v-model="data.infoMachine.hotels" @change="changeRadio">
                    <el-radio :label="1" border>{{$t('goods.ctrips.all')}}</el-radio>
                    <el-radio :label="2" border>{{$t('goods.ctrips.specify')}}</el-radio>
                    <el-radio :label="3" border>{{$t('goods.ctrips.exclud')}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item :label="$t('machine.marketing.Applicable') + ':'" prop="grouping" class="w-1/2">
                <el-select v-model="data.macping" :placeholder="$t('message.pleaseSelectMachine')" clearable filterable
                    @change="getmping($event, 2)" :disabled="data.infoMachine.hotels == 1">
                    <el-option v-for="item in data.maclist" :key="item.m_id"
                        :label="item.m_id + '-' + item.machine_id + '-' + item.machine_name" :value="item.machine_id" />
                </el-select>

                <div class="w-full dashed mt-2 p-2" v-if="data.grouping.length != 0">
                    <el-tag v-for="item, key of data.grouping" :key="key" closable :disable-transitions="false"
                        class="mr-2" :type="item.mg_id == undefined ? '' : 'warning'" size="large"
                        @close="handleClose(key, item)">
                        {{ item.m_id + ' - ' }}{{ item.machine_id || '' }}{{ item.mg_name || ' - ' +
                            item.machine_name }}
                    </el-tag>
                </div>

            </el-form-item>
            <!-- 指定酒店 -->
            <el-form-item :label="$t('goods.ctrips.assignHotel')+':'" prop="designated_goods" class="w-1/2">
                <el-radio-group v-model="data.infoHotel.hotels" @change="changehotels">
                    <el-radio :label="1" border>{{$t('goods.ctrips.all')}}</el-radio>
                    <el-radio :label="2" border>{{$t('goods.ctrips.specify')}}</el-radio>
                    <el-radio :label="3" border>{{$t('goods.ctrips.exclud')}}</el-radio>
                </el-radio-group>
                <el-icon class="ml-2" @click="addHotel" v-if="data.infoHotel.hotels == 2 || data.infoHotel.hotels == 3"
                    :size="20">
                    <CirclePlus />
                </el-icon>
            </el-form-item>
            <el-form-item>
                <el-form :model="data.infoHotel" class="w-full" label-width="120">
                    <el-form-item v-if="data.infoHotel.hotels == 2 || data.infoHotel.hotels == 3">
                        <el-table border :data="hotelList" :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }" class="w-full mr-5">
                            <el-table-column prop="c_id" :label="$t('goods.ctrips.city')">
                                <template #default="scope">
                                    <el-select v-model="scope.row.cityId" @change="changeCity(scope.row)"
                                        :placeholder="$t('message.pleaseSelect')"
                                        v-if="route.query.pages == 'add' || scope.row.isAdd" filterable clearable
                                        :loading="mtloading">
                                        <el-option v-for="item in cityList" :key="item.cityId" :label="item.cityName"
                                            :value="item.cityId" />
                                    </el-select>
                                    <span v-else>{{ setCity(scope.row) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hotelName" :label="$t('goods.ctrips.hotel')" show-overflow-tooltip>
                                <template #default="scope">
                                    <div v-if="scope.row.cityId && route.query.pages == 'add' || scope.row.isAdd">
                                        <span class="cursor-pointer text-[#409EFF]"
                                            @click="toHotel(scope.row, scope.$index)">{{ scope.row.hotelName ?
                                            scope.row.hotelName:$t('message.pleaseSelect')}}</span>
                                    </div>
                                    <span v-else>{{ scope.row.hotelName }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('public.picture')" show-overflow-tooltip>
                                <template #default="scope">
                                    <img v-if="scope.row.imageUrl" class="w-24 h-24 inline-block"
                                        :src="scope.row.imageUrl" />
                                    <span v-else></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="hotelTel" :label="$t('goods.ctrips.phone')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model.number="scope.row.hotelTel" :placeholder="$t('goods.ctrips.tel')" clearable />
                                </template>
                            </el-table-column>
                            <el-table-column prop="roomQuantity" :label="$t('goods.ctrips.rooms')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input v-model.number="scope.row.roomQuantity" :placeholder="$t('goods.groupM.pleaseRooms')" clearable />
                                </template>
                            </el-table-column>
                            <el-table-column prop="rise_fall_ratio" :label="$t('goods.ctrips.ratio')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.rise_fall_ratio" controls-position="right"
                                        :min="-100" :max="100">
                                        <template #decrease-icon>
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </template>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('public.operate')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-button size="small" type="primary" @click="delHotel(scope.row, scope.$index)"
                                        v-prmis="'free_hotel_del'">{{ $t('public.del') }}</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <!-- 指定商品 -->
            <el-form-item :label="$t('goods.groupM.designatedGood')+':'" prop="designated_goods" class="w-1/2">
                <el-radio-group v-model="data.infoGoods.hotels">
                    <el-radio :label="1" border>{{$t('goods.ctrips.all')}}</el-radio>
                    <el-radio :label="2" border>{{$t('goods.ctrips.specify')}}</el-radio>
                    <el-radio :label="3" border>{{$t('goods.ctrips.exclud')}}</el-radio>
                </el-radio-group>
                <el-icon class="ml-2" @click="addGoods" v-if="data.infoGoods.hotels == 2 || data.infoGoods.hotels == 3"
                    :size="20">
                    <CirclePlus />
                </el-icon>
            </el-form-item>
            <el-form-item>
                <el-form :model="data.infoGoods" class="w-full" label-width="120">
                    <el-form-item v-if="data.infoGoods.hotels == 2 || data.infoGoods.hotels == 3">
                        <el-table border :data="gList" :header-cell-style="{ 'text-align': 'center' }"
                            :cell-style="{ 'text-align': 'center' }" class="w-full mr-5"
                            :default-sort="{ prop: 'date', order: 'descending' }">
                            <el-table-column prop="g_name" :label="$t('machine.goods.name')">
                                <template #default="scope">
                                    <el-select v-if="route.query.pages == 'add' || scope.row.isAdd"
                                        v-model="scope.row.g_id" :placeholder="$t('message.pleaseSelect')" clearable
                                        filterable @change="changeGoods(scope.row)">
                                        <el-option v-for="item in goodsList" :key="item.gc_id"
                                            :label="item.g_id + '-' + item.g_name" :value="item.g_id" />
                                    </el-select>
                                    <span class="cursor-pointer" v-else>{{ setgName(scope.row) }}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="pic" :label="$t('machine.goods.pic')" show-overflow-tooltip>
                                <template #default="scope">
                                    <img v-if="scope.row.pic" class="w-24 h-24 inline-block" :src="scope.row.pic" />
                                    <span v-else></span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="g_type" :label="$t('machine.goods.type')" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.g_type == 1 ? $t('goods.groupM.normalGood') : scope.row.g_type == 3 ?
                                    $t('goods.groupM.ticket') : '' }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="sku" label="SKU" show-overflow-tooltip />
                            <el-table-column :label="$t('machine.goods.sellingPrice')" show-overflow-tooltip
                                width="180">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.sale_amount" controls-position="right">
                                        <template #decrease-icon>
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </template>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('goods.ctrips.ratio')" show-overflow-tooltip width="180">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.rise_fall_ratio" controls-position="right"
                                        :min="-100" :max="100">
                                        <template #decrease-icon>
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </template>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('goods.groupM.lower')" show-overflow-tooltip width="180">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.buy_lower" controls-position="right" :min="1">
                                        <template #decrease-icon>
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </template>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('goods.groupM.upper')" show-overflow-tooltip width="180">
                                <template #default="scope">
                                    <el-input-number v-model="scope.row.buy_upper" controls-position="right" :min="0">
                                        <template #decrease-icon>
                                            <el-icon>
                                                <Minus />
                                            </el-icon>
                                        </template>
                                    </el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('goods.groupM.required')">
                                <template #default="scope">
                                    <el-select v-model="scope.row.is_required" :placeholder="$t('message.pleaseSelect')"
                                        clearable filterable @change="changeGoods(scope.row)">
                                        <el-option v-for="item in is_required" :label="item.label" :value="item.value"
                                            :key="item.value" />
                                    </el-select>
                                </template>
                            </el-table-column>
                            <el-table-column :label="$t('public.operate')" show-overflow-tooltip>
                                <template #default="scope">
                                    <el-button size="small" type="primary" @click="delGoods(scope.row, scope.$index)"
                                        v-prmis="'free_goods_del'">{{ $t('public.del') }}</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-form>
            </el-form-item>
            <el-form-item v-if="isSaveAll" :label="$t('goods.ctrips.ratio')+':'" class="w-1/2">
                <el-input v-model.number="data.rise" :placeholder="$t('goods.groupM.pleaseRatio')" clearable />
            </el-form-item>
            <div class="w-full text-center pt-6">
                <el-button type="primary" @click="saveAll" v-prmis="'trip_multiple_update' || 'trip_multiple_add'">{{
                    $t('public.save')}}</el-button>
                <el-button @click="cancel">{{ $t('public.return') }}</el-button>
            </div>
        </div>
        <!-- 图片展示 -->
        <el-dialog v-model="data.demonstrate" center width="30%">
            <div class="flex justify-center">
                <el-image class="max-w-80" :src="data.pic" fit="fill" />
            </div>
        </el-dialog>

        <!-- 酒店 -->
        <el-dialog v-model="isHotelName" width="50%">
            <div class="w-1/2 mb-4">
                <el-input v-model="dataHotel.hotelName" :placeholder="$t('goods.ctrips.pleaseHotelName')" clearable>
                    <template #append>
                        <el-button @click="filterHotel"> {{ $t('public.search') }} </el-button>
                    </template>
                </el-input>
            </div>
            <el-table border :data="HotelList" v-loading="data.mcloading"
                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                class="w-full max-h-80" style="overflow: auto;" height="20rem" @select="handlerSelect"
                @row-click="rowClickHandle" ref="multipleTableRef" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="hotelName" :label="$t('goods.ctrips.hotelName')" show-overflow-tooltip />
                <el-table-column prop="hotelId" :label="$t('goods.ctrips.hotel')+'ID'" show-overflow-tooltip />
                <el-table-column prop="hotelTel" :label="$t('goods.ctrips.phone')" show-overflow-tooltip />
                <el-table-column prop="address" :label="$t('goods.ctrips.address')" show-overflow-tooltip />
                <el-table-column prop="roomQuantity" :label="$t('goods.ctrips.rooms')" show-overflow-tooltip />
            </el-table>
            <el-pagination class="float-right mt-4" v-model:current-page="dataHotel.info.page"
                v-model:page-size="dataHotel.info.pageNum" :page-sizes="[10]" :size="size"
                layout="prev, pager, next, sizes, total" :total="dataHotel.total" @size-change="fraction"
                @current-change="current" />
            <div class="text-center mt-10">
                <div class="inline-block">
                    <el-button type="primary" size="small" @click="onOk"> {{ $t('public.ok') }} </el-button>
                    <el-button size="small" @click="isHotelName = false"> {{ $t('public.cancel') }} </el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import { useRoute, useRouter } from "vue-router";
import { getCityList, getHotelList } from '@/api/machine_gmGoods'
import { ElMessage } from "element-plus";
import { getgoodsList } from "@/api/goods";
import { getripFind, getripUpdate, getripadd, gethotelDel, getgoodsDel } from '@/api/goods_ctrips'
import { onMounted, computed } from "vue";
import { getmachineList } from '@/api/machine';
import Upload from '@/components/Upload/index.vue';
const multipleTableRef = ref()
const router = useRouter();
let props = defineProps({
    info: {
        type: Object,
        default: {}
    }
})
let isHotelName = ref(false)
let is_required = ref([{ label: $t('public.yes'), value: 1 }, { label: $t('public.no'), value: 2 }])
let refMGoods = ref()
const route = useRoute()
let mtloading = ref(false) // 加载
let isgmGoods = ref(false)
let isunEdit = ref(false)
let isEdit = ref(false)
let delMlist = ref([])
let hotelList = ref([{
    isAdd: true,
    cityId: '',
    hotelId: '',
    hotelName: '',
    hotelTel: '',
    imageUrl: '',
    roomQuantity: null,
    rise_fall_ratio: 0
}])
let gList = ref([{
    isAdd: true,
    g_id: '',
    sku: '',
    g_type: null,
    sale_amount: '',
    rise_fall_ratio: 0,
    pic: '',
    buy_upper: 0,
    buy_lower: 1,
}])
let dataHotel = reactive({
    info: {
        page: 1,
        pageNum: 10
    },
    total: 0,
    rowCityVal: '',
    hotelName: '',
    filterHotel: [],
    selectCheckList: [],
    selectCheckData: {},
    hotelIndex: 0
})
let data = reactive({
    demonstrate: false,
    grouping: [],
    macping: '',
    rise: 0,
    pic: '',
    packageName: '',
    maclist: [],
    infoHotel: {
        designated_machine: 1,
        hotels: 1,
        exclusion: true
    },
    infoMachine: {
        designated_machine: 1,
        hotels: 1,
        exclusion: true
    },
    infoGoods: {
        designated_machine: 1,
        hotels: 1,
        exclusion: true
    },
    isTable: false,
})
const goodsList = ref([])
let list = ref({})
interface ListItem {
    cityId: string
    cityName: string
}
const emit = defineEmits(['gmInject'])
const cityList = ref<ListItem[]>([])
const HotelList = ref<ListItem[]>([])
let isSaveAll = computed(() => {
    return data.infoGoods.hotels == 1 || data.infoHotel.hotels == 1
})

// 上传返回
let expose = (e: any) => {
    if (e.status == 200) {
        data.pic = e.file.response.data
    } else {
        data.pic = ''
    }
}
// 查看图片
let urlimg = (e: any) => {
    if (e == '') {
        return;
    }
    data.demonstrate = true;
}
let changeRadio = (val: number) => {
    if (route.query.pages == 'add' && val != 1) {
        data.grouping = []
    } else {
        data.grouping = data.maclist
    }

    if (route.query.pages == 'edit') {
        if (list.value.designated_machine != 1) {
            if (val != 1) {
                delMlist.value = []
                data.grouping = list.value.machine
            } else {
                data.grouping = data.maclist
            }
        } else {
            if (val != 1) {
                data.grouping = []
            } else {
                data.grouping = data.maclist
            }
        }

    }
}
// 删除选中的设备分组/设备
let handleClose = (e: any, row: any) => {
    delMlist.value.push(row.tmm_id)
    data.grouping.splice(e, 1)
    if (data.infoMachine.hotels == 1) {
        data.infoMachine.hotels = 2
        data.grouping = list.value.machine.length ? list.value.machine : []
    }

}
// 选中分组/设备
let getmping = (e: any, k: any) => {
    let obj = {
        m_id: "",
        machine_id: "",
        machine_name: ""
    }
    // 设备
    data.maclist.map((item) => {
        if (item.machine_id === e) {
            obj.m_id = item.m_id
            obj.machine_id = item.machine_id
            obj.machine_name = item.machine_name
        }
    })
    if (route.query.id) {
        obj.gm_id = route.query.id
    }
    data.grouping.push(obj)
    data.macping = ''
}
// 获取设备信息
let geturlinfo = async () => {
    await getmachineList({}).then(res => {
        if (res.state == 200) {
            data.maclist = res.data
            if (data.infoMachine.hotels == 1) {
                data.grouping = data.maclist
            }
        }
    })
}
geturlinfo()
// 获取城市列表
let getCity = () => {
    getCityList({}).then(res => {
        if (res.state == 200) {
            cityList.value = res.data.city
        }
    })
}
getCity()
let setCity = (row: any) => {
    let name = '--'
    for (const item of cityList.value) {
        if (item.cityId === row.cityId) {
            name = item.cityName
            break;
        }
    }
    return name
}
let setgName = (row: any) => {
    for (const item of goodsList.value) {
        if (row.g_id == item.g_id) {
            row.g_name = item.g_name
        }
    }
    return row.g_name || '--'
}
// 获取商品列表
let findgoodsList = () => {
    getgoodsList({}).then(res => {
        if (res.state == 200) {
            goodsList.value = res.data.filter(item => item.g_type != 2)
        }
    })
}
findgoodsList()
// 改变酒店下拉
let changeHotel = (row: any) => {
    for (let item of HotelList.value) {
        if (item.hotelId == row.hotelId) {
            row.imageUrl = item.imageUrl
            break;
        }
    }
}
let filterHotel = () => {
    let parm = {
        page: dataHotel.info.page,
        pageNum: dataHotel.info.pageNum,
        cityId: dataHotel.rowCityVal,
        hotelName: dataHotel.hotelName
    }
    getHotelList(parm).then(res => {
        if (res.state == 200) {
            HotelList.value = res.data.list
        }
    }).catch(err => {
        console.log(err)
    })
}
let toHotel = (row: any, index: number) => {
    dataHotel.hotelIndex = index
    findHotelList(row.cityId)

}
let onOk = () => {
    if (data.selectCheckList.length) {
        dataHotel.selectCheckData = dataHotel.selectedRow
        hotelList.value.forEach((item, index) => {
            if (index == dataHotel.hotelIndex) {
                item.hotelName = dataHotel.selectedRow.hotelName
                item.hotelId = dataHotel.selectedRow.hotelId
                item.imageUrl = dataHotel.selectedRow.imageUrl
            }
        })
        isHotelName.value = false
    } else {
        ElMessage({
            message:  $t('message.noHotel'),
            type: 'error'
        })
    }
}

// 页数回调
let current = (e: any) => {
    dataHotel.info.page = e
    findHotelList()
}
// 条数回调
let fraction = (e: any) => {
    dataHotel.info.pageNum = e
    findHotelList()
}
let findHotelList = (val) => {
    let parm = {
        page: dataHotel.info.page,
        pageNum: dataHotel.info.pageNum,
        cityId: val ? val : dataHotel.rowCityVal
    }
    getHotelList(parm).then(res => {
        if (res.state == 200) {
            isHotelName.value = true
            dataHotel.filterHotel = [...res.data.list]
            HotelList.value = res.data.list
            dataHotel.total = res.data.totalCount
        }
    })
}
// 改变城市下拉
let changeCity = (row: any) => {
    dataHotel.rowCityVal = row.cityId
    row.hotelName = ''
    row.hotelId = ''
    row.imageUrl = ''
}
// 改变商品名称下拉
let changeGoods = (row: any) => {
    for (let item of goodsList.value) {
        if (item.g_id == row.g_id) {
            row.pic = item.pic
            row.g_type = item.g_type
            row.sku = item.sku
            row.sale_amount = item.retail_price
            break;
        }
    }
}

// 当选择项发生变化时会触发该事件
function handleSelectionChange(val) {
    data.selectCheckList = val
}
let handlerSelect = (selection, row) => {
    dataHotel.selectedRow = row
    // 清除 所有勾选项
    multipleTableRef.value.clearSelection()
    if (selection.length == 0) return
    multipleTableRef.value.toggleRowSelection(row, true)
}
let rowClickHandle = (row) => {
    const selectData = data.selectCheckList
    multipleTableRef.value.clearSelection()
    if (selectData.length == 1) {
        const [item] = selectData;
        const shouldSelect = item !== row;
        multipleTableRef.value.toggleRowSelection(row, shouldSelect);
    } else {
        multipleTableRef.value.toggleRowSelection(row, true);
    }
}
onMounted(() => {
    if (route.query.pages != 'add') {
        getList()
    }
})
// 获取组合商品配置列表
let getList = () => {
    let info = route.query
    mtloading.value = true
    getripFind({ tm_id: info.id }).then(res => {
        mtloading.value = false
        if (res.data) {
            list.value = res.data
            data.pic = list.value.pic
            data.packageName = list.value.tm_name
            isgmGoods.value = list.value.status == 1 ? true : false
            data.infoMachine.hotels = list.value.designated_machine
            data.infoGoods.hotels = list.value.designated_goods
            data.infoHotel.hotels = list.value.designated_hotel
            data.grouping = list.value.machine
            hotelList.value = list.value.hotel ? list.value.hotel : hotelList.value
            data.rise = list.value.rise_fall_ratio
            if (list.value.goods && list.value.goods.length) {
                gList.value = list.value.goods.filter(item => item.g_type != 2)
            }
        }
    })
}
// 删除酒店
const delHotel = (row: any, index: number) => {
    if (row.tmh_id) {
        gethotelDel({ tmh_id: row.tmh_id }).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.delSuccess'),
                    type: 'success'
                })

                getList()
                return
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            })
        })
    } else {
        hotelList.value.splice(index, 1)
    }
}
// 添加酒店
let addHotel = () => {
    isEdit.value = false
    const now = new Date()
    now.setDate(now.getDate() + 1)
    hotelList.value.push({
        isAdd: true,
        hotelName: '',
        hotelTel: '',
        imageUrl: '',
        roomQuantity: null,
        rise_fall_ratio: 0
    })
}
// 删除商品
const delGoods = (row: any, index: number) => {
    if (row.tmg_id) {
        getgoodsDel({ tmg_id: row.tmg_id }).then(res => {
            if (res.state == 200) {
                ElMessage({
                    message: $t('message.delSuccess'),
                    type: 'success'
                })
                getList()
                return
            }
            ElMessage({
                message: $t('message.networkFailed'),
                type: 'error'
            })
        })
    } else {
        gList.value.splice(index, 1)
    }
}
// 添加商品
let addGoods = () => {
    isEdit.value = false
    const now = new Date()
    now.setDate(now.getDate() + 1)
    gList.value.push({
        isAdd: true,
        g_id: '',
        sku: '',
        g_name: '',
        g_type: null,
        sale_amount: 0,
        buy_upper: 0,
        buy_lower: 1,
        rise_fall_ratio: 0,
    })
}
let cancel = () => {
    router.back()
}
// 添加全部
let setAddAll = () => {
    let parm = {
        tm_name: data.packageName,
        status: isgmGoods.value ? 1 : 2,
        designated_hotel: data.infoHotel.hotels,
        designated_goods: data.infoGoods.hotels,
        designated_machine: data.infoMachine.hotels,
        pic: data.pic,
        rise_fall_ratio: data.rise|| 0
    }
    if (data.grouping.length && data.infoGoods.hotels == 1) {
        parm.machineList = data.grouping
    }
    if (gList.value.length && data.infoGoods.hotels != 1) {
        parm.goodsList = gList.value
    }
    if (gList.value.length && data.infoGoods.hotels != 1) {
        parm.goodsList = gList.value
    }
    if (data.grouping.length && data.infoMachine.hotels != 1) {
        parm.machineList = data.grouping
    }
    //指定酒店
    if (data.infoHotel.hotels != 1) {
        if (hotelList.value && hotelList.value.length && !list.value.hotelList) {
            hotelList.value.forEach(items => {
                let hotel = HotelList.value.filter(item => items.hotelId == item.hotelId)
                let arr = cityList.value.filter(item => items.cityId == item.cityId)
                items.tc_id = arr.length ? arr[0].tc_id : ''
                items.cityName = arr.length ? arr[0].cityName : ''
            })
            parm.hotelList = hotelList.value
        }
    }

    getripadd(parm).then(res => {
        if (res.state == 200) {
            ElMessage({
                message: $t('message.addSuccess'),
                type: 'success'
            })
            router.back()
            getList()
            return
        }
        ElMessage({
            message: $t('message.networkFailed'),
            type: 'error'
        })
    }).catch(err => {
        console.log(err)
    })
}
// 更新全部
let setUpdataAll = () => {
    let parm = {
        tm_id: route?.query.id,
        tm_name: data.packageName,
        pic: data.pic,
        status: isgmGoods.value ? 1 : 2,
        designated_hotel: data.infoHotel.hotels,
        designated_goods: data.infoGoods.hotels,
        designated_machine: data.infoMachine.hotels,
        rise_fall_ratio: data.rise || 0
    }
    /* 指定为指定除外.指定列表 */
    // 酒店
    if (data.infoHotel.hotels == 1 && list.value.hotelList) {
        let delHotel = []
        list.value.hotelList.forEach(item => {
            delHotel.push(item.mfh_id)
        })
        parm.delHotel = delHotel.join(',')
    }
    // 商品
    if (data.infoGoods.hotels == 1 && list.value.goodsList) {
        let delGoods = []
        list.value.goodsList.forEach(item => {
            delGoods.push(item.mfg_id)
        })
        parm.delGoods = delGoods.join(',')
    }
    // 删除设备
    if (delMlist.value.length && data.infoMachine.hotels !== 1) {
        parm.delMachine = delMlist.value.join(',')
    }
    if (data.grouping.length && list.value.designated_machine == 1) {
        let delMachine = []
        list.value.machine.forEach(item => {
            delMachine.push(item.tmm_id)
        })
        parm.delMachine = delMachine.join(',')
    }
    // 新增设备
    if (data.grouping.length) {
        parm.machineList = data.grouping
    }
    // 新增酒店时
    if (hotelList.value && data.infoHotel.hotels != 1) {
        hotelList.value.forEach(items => {
            let arr = cityList.value.filter(item => items.cityId == item.cityId)
            let arrHotel = HotelList.value.filter(item => item.hotelId == items.hotelId)
            items.tc_id = arr.length ? arr[0].tc_id : ''
            items.cityName = arr.length ? arr[0].cityName : ''
        })
        parm.hotelList = hotelList.value
    }
    // 商品
    if (gList.value.length && data.infoGoods.hotels != 1) {
        parm.goodsList = gList.value
        let arr = []
        parm.goodsList.forEach(item => {
            arr.push({
                g_id: item.g_id,
                sale_amount: item.sale_amount,
                buy_lower: item.buy_lower,
                buy_upper: item.buy_upper,
                is_required: item.is_required,
                rise_fall_ratio: item.rise_fall_ratio,
                tmg_id: item.tmg_id
            })
        })
        parm.goodsList = arr
    }
    getripUpdate(parm).then(res => {
        if (res.state == 200) {
            ElMessage({
                message: $t('message.modifySuccess'),
                type: 'success'
            })
            setTimeout(() => {
                getList()
            }, 500)

            return
        }
        ElMessage({
            message: $t('message.networkFailed'),
            type: 'error'
        })
    }).catch(err => {
        console.log(err)
    })
}
// 保存全部
let saveAll = () => {
    // 酒店
    if (data.infoHotel.hotels != 1 || data.infoGoods.hotels != 1) {
        // 指定非全部是必传
        let arrHotel = hotelList.value.filter(item => !item.cityId)
        if (list.value && data.infoHotel.hotels != 1 && arrHotel.length) {
            return ElMessage({
                message: $t('message.noAddHotel'),
                type: 'error'
            })
        }
        let arrGoods = gList.value.filter(item => !item.g_id)
        if (list.value && data.infoGoods.hotels != 1 && arrGoods.length) {
            return ElMessage({
                message: $t('message.noAddGoods'),
                type: 'error'
            })
        }
    }
    if (route.query.pages == 'edit') {
        setUpdataAll()
    }
    if (route.query.pages == 'add') {
        setAddAll()
    }

}
</script>
<style type="text/css">
.dashed {
    border: 2px dashed var(--el-border-color);
}

.el-icon-delete {
    text-align: center;
    margin: auto;
}
</style>